<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <title>Vue 指令</title>
  <!-- <script src='https://cdn.jsdelivr.net/npm/vue/dist/vue.js'></script> -->
  <script src="../js/vue.js"></script>
</head>

<body>
  <div id="app">
    <button @click="chilikChanage()">
      请点击我进行show值的更改::::::{{show}}
    </button>
    <p v-show="show">你看不看得见我</p>
    <p v-if="show">你看不看得见我</p>
    <!-- V-bind指令 -->
    <img :src="src" :alt="msg" :title="msg"></img>

    <div v-if="Math.random() > 0.5">
      Now you see me
    </div>
    <div v-else-if="Math.random() ==0.5">
      now you can se mee
    </div>
    <div v-else>
      Now you don't
    </div>
    <div v-html="html"></div>
    <div v-for="(item,index) in obj">
      <button @Click="clickalert($event,index)">{{item}}</button>
      <br>
    </div>
    <div>
      <input v-model="src"></input>
      <p>sajdhjka</p>
      <p>sajdhjka</p>
      <textarea v-model="msg" placeholder="add multiple lines"></textarea>

    </div>
  </div>
  <script>
    var vue = new Vue({
      el: "#app",
      data: {
        msg: "hello world",
        show: true,
        src: "../images/ks.png",
        html: '<h1>This is HTML By Vue test</h1>',
        obj: [
          'apple', 'HuaWei', 'Xiao MI', "锤子手机"
        ]
      },
      methods: {
        chilikChanage() {
          this.show = !this.show;
        },
        clickalert(envet, index) {
          alert(envet.target.innerText + (++index));
        }
      },
    });
  </script>
</body>

</html>